<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/nanoscroller.css">
    <link rel="stylesheet" type="text/css" href="css/bubbles.css">
    <link rel="stylesheet" type="text/css" href="css/blog.css">
</head>
<body>
    <div class="nano">
        <div class="nano-content">
            <div class="square-wrapper">
                <ul class="bg-bubbles">
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
            
            <div class="user-face-area">
                <img id="left-wing" src="img/wl.png"></img>
                <div class="user-face-img-area">
                    <img src="face.jpg" width="200px" id="face"></img>
                    <div id="user-name">剃切绘里奈</div>
                    <div id="user-desc">难吃死啦~~难吃死啦~~难吃死啦~~</div>
                </div>
                <img id="right-wing" src="img/wr.png"></img>
            </div>    
            
            <div class="card-area">
                <div class='ribbon'>
                    <a href="#"><span>网站首页</span></a>
                    <a href="#"><span>分类浏览</span></a>
                    <a href="#"><span>标签墙</span></a>
                    <a href="#"><span>时间轴</span></a>
                    <a href="#"><span>关于作者</span></a>
                </div>
            </div>
            
            <style>
                .type-area {
                    min-height: 800px;
                    margin: 10px 0;
                    display: flex;
                }
                .type-name-area {
                    width: 8em;
                }
                .type-name {
                    padding: 0.5em;
                    margin: 0.5em 0;
                    position: relative;
                    text-align: center;
                    font-weight: bold;
                    line-height: 1em;
                    background-color: #ccc;
                    color: black;
                    cursor: pointer;
                }
                .type-name-currect {
                    background-color: #000;
                    color: #fff;
                }
                .type-name-currect:after {
                    content: "";
                    position: absolute;
                    float: left;
                    top: 0;
                    right: -2em;
                    border: 1em solid transparent;
                    border-left-color: #000;
                }
                .type-item-area {
                    flex: 1;
                    padding: 16px 36px 16px 36px; 
                    box-shadow: 0 0 6px rgba(0,0,0,0.3);  
                }               
                .type-item {
                    width: 250px;
                    margin: 2px 0;
                    padding: 5px;
                    display: inline-block;
                    text-align: center;
                    font-size: 18px;
                    color: black;
                    cursor: pointer;
                }
                .type-item:hover {
                    color: #3366CC;
                    box-shadow: 0 0 6px rgba(0,0,0,0.9);  
                } 
                .type-item-img-box img { 
                    width: 240px;
                }
                .type-item-content-box {
                    margin-top: 5px;
                    padding: 0 5px;
                }
                .type-item-hr {
                    height: 1px;
                    border: none;
                    border-top: 1px solid #999;
                    margin: 0 35px;
                }
                .type-item-meta-box {
                    margin-top: 5px;
                    padding: 0 5px;  
                    font-size: 12px;
                }
                
                .type-area-pager {
                    width: 1072px;
                    height: 40px;
                    margin-left: 128px;
                    color: black;
                }        
            </style>
            
            <div class="list-area">
                <div class="type-area">
                    <div class="type-name-area">
                        <div class="type-name">一个类型</div>
                        <div class="type-name type-name-currect">一个类型</div>
                        <div class="type-name">一个类型</div>                        
                    </div>
                    <div class="type-item-area">
                        <div class="type-item-row">
                            <div class="type-item">
                                <div class="type-item-img-box">
                                    <img src="c4.jpeg" />
                                </div>
                                <div class="type-item-content-box">
                                    一二三四五六七八九十一二
                                </div>
                                <hr class="type-item-hr" />
                                <div class="type-item-meta-box">
                                    2015-12-03
                                </div>
                            </div><div class="type-item">
                                <div class="type-item-img-box">
                                    <img src="c4.jpeg" />
                                </div>
                                <div class="type-item-content-box">
                                    asdfasdfsadfassdaf
                                </div>
                                <hr class="type-item-hr" />
                                <div class="type-item-meta-box">
                                    2015-12-03
                                </div>
                            </div><div class="type-item">
                                <div class="type-item-img-box">
                                    <img src="c4.jpeg" />
                                </div>
                                <div class="type-item-content-box">
                                    asdfasdfs
                                </div>
                                <hr class="type-item-hr" />
                                <div class="type-item-meta-box">
                                    2015-12-03
                                </div>
                            </div><div class="type-item">
                                <div class="type-item-img-box">
                                    <img src="c4.jpeg" />
                                </div>
                                <div class="type-item-content-box">
                                    asdfasdfsa
                                </div>
                                <hr class="type-item-hr" />
                                <div class="type-item-meta-box">
                                    2015-12-03
                                </div>
                            </div>                            
                        </div>
                        
                        <div class="type-item">
                            <div class="type-item-img-box">
                                <img src="c4.jpeg" />
                            </div>
                            <div class="type-item-content-box">
                                asdfasdfsadfassdaf
                            </div>
                            <hr class="type-item-hr" />
                            <div class="type-item-meta-box">
                                2015-12-03
                            </div>
                        </div>                             
                    </div>
                </div>
                <div class="type-area-pager">
                    <span>0</span>
                    <span>0</span>                     
                </div>
            </div>  

            <footer></footer>
        </div>
    </div>
    
    <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="js/jquery.nanoscroller.min.js"></script>
    
    <script>
       
        $(function() {
        
            /* 滚动条 */
            $('.nano').nanoScroller(); 

        }); 
          
    </script>
</body>
</html>